<%-- 
    Document   : perfil
    Created on : 26/02/2012, 17:20:34
    Author     : Leonardo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setLocale scope="session" value="${param['language']}" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><fmt:message key="profile.title" /></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
         
  <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="css/prefs.css" rel="stylesheet">
    
 <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
  </head>

  <body data-spy="scroll" data-target=".subnav" data-offset="50">


  <!-- Navbar
    ================================================== -->
   <jsp:include page="header.jsp" flush="true"/>                                      
<!-- Masthead
================================================== -->
<div class="jumbotron subhead" id="overview"> 
  <div class="subnav subnav-fixed">
    <ul class="nav nav-pills">
      <li><a href="#"><i class="icon-user"></i> Leonardo Zertus</a></li>
      <li><a href="#"><i class="icon-th-large"></i>&nbsp;Mural</a></li>
      <li><a href="#"><i class="icon-cog"></i> Configurações</a></li>
      <li><a href="#"><i class="icon-tags"></i> Tags</a></li>
      <li><a href="#"><i class="icon-comment"></i> Comentários</a></li>
      <li><a href="#"><i class="icon-camera"></i> Fotos</a></li>
      <li><i>&nbsp;<input type="text" class="" style="margin-top: 4px;">&nbsp;<button type="submit" class="btn-info" style="margin-bottom: 5px;"><i class="icon-search icon-white"></i> Procurar</button></i></li>
    </ul>

  </div>
</div>
<!-- Lado página -->
    <div class="row-fluid" style="background: #fff;">
        <div class="span1" style="background: #f5f5f5; border: 1px solid #DEDEDE; width: 10%; margin-left: 10px; min-height: 768px;">
            <div style="padding: 12px;">
            <img src="imagens/jo.jpg" alt="João" align="center" style="width: 100px; height: 120px; border: 5px solid #fff;"/>  

            <hr>
            </div>
            <div style="padding: 5px;">
            <ul class="nav navs-list">
            <li class="nav-header">João Fernando</li>
            <li><a href="#"><i class="icon-cog"></i>&nbsp;<fmt:message key="ble.perfil" /></a></li>
            <li><a href="#"><i class="icon-th-list"></i>&nbsp;<fmt:message key="ble.mural" /></a></li>
            <li><a href="#"><i class="icon-camera"></i>&nbsp;<fmt:message key="ble.fotos" /></a></li>
            <li><a href="#"><i class="icon-comment"></i>&nbsp;<fmt:message key="ble.comentarios" /></a></li>
            <li class="nav-header"><fmt:message key="ble.favoritos" /></li>
            <li><a href="#"><i class="icon-th"></i> &nbsp;<fmt:message key="ble.salas" /></a></li>
            <li><a href="#"><i class="icon-tags"></i>&nbsp;<fmt:message key="ble.tags" /></a></li>
            <li><a href="#"><i class="icon-user"></i>&nbsp;<fmt:message key="ble.amigos" /></a></li>
            <li class="nav-header"><fmt:message key="ble.outros" /></li>
            <li><a href="#"><i class="icon-inbox"></i>&nbsp;<fmt:message key="ble.aplicativos" /></a></li>    
            </ul>
            </div>
        </div>
        
         <div class="span8" style=" border-left: 1px solid #DEDEDE; border-right: 1px solid #DEDEDE; text-align: center; width: 72.81196581200001%; min-height: 768px;" >
             <div class="row-fluid" style="background: #fff">
               <div class="span7" style="background: #fff;  margin-left: 35px; ">
                   <div style="background: #f5f5f5; border: 1px solid #dedede; text-align: center;">
                    <br>
                       <form class="form-inline" style=" margin-right: 0px;">
                    <input type="text" class="input-xlarge" placeholder="Conte suas novidades...">
                    <button type="submit" class="btn-success"><i class="icon-ok icon-white"></i></button>
                    </form>
                      </div> 
                   <br>
                <div style="margin:5px; text-align: justify">
                     <blockquote>
                    <p>Leonardo Zertus</p>
                    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
                    </blockquote>
                     <hr>
                     Ae pessoal, recebi isso aqui por e-mail a um tempo atrás, então já vou adiantando que é coisa velha e o texto é gigante, se não quiser não leia e espere um resumo ou comentários do pessoal. Não tem muita graça mas to postando pois alguém pode gostar e como o boteco tá meio parado mesmo, aqui vai o texto:
                     Meu nome é Afonso Soares de Melo, e resolvi contar algo que se passou comigo: Estava sentado no meu escritório quando lembrei de uma chamada telefônica que tinha que fazer. Encontrei o número e disquei. Atendeu-me um cara mal humorado dizendo:
                    - Fale!!!
                    <hr>

                </div>
                  <div style="margin:5px; text-align: justify">
                     <blockquote class="pull-right">
                    <p>Leonardo Zertus</p>
                    <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
                    </blockquote>
                      <br><br><br><hr>
                     <p>
                     Ae pessoal, recebi isso aqui por e-mail a um tempo atrás, então já vou adiantando que é coisa velha e o texto é gigante, se não quiser não leia e espere um resumo ou comentários do pessoal. Não tem muita graça mas to postando pois alguém pode gostar e como o boteco tá meio parado mesmo, aqui vai o texto:
                     Meu nome é Afonso Soares de Melo, e resolvi contar algo que se passou comigo: Estava sentado no meu escritório quando lembrei de uma chamada telefônica que tinha que fazer. Encontrei o número e disquei. Atendeu-me um cara mal humorado dizendo:
                    - Fale!!!</p>

                </div>
               </div>
               <div class="span4" style="background: #fff; margin-left: 35px; margin-top: 7px">
                  <form class="well form-inline">
                    <h4 style="color:#999999 ">Veja o que está rolando no Babel Chat</h4>
                    </form>
                   <div style="margin-bottom:5px; padding: 15px; border: 1px solid #DEDEDE; text-align: justify">
                   Ae pessoal, recebi isso aqui por e-mail a um tempo atrás, então já vou adiantando que é coisa velha e o texto é gigante, se não quiser não leia e espere um resumo ou comentários do pessoal. Não tem muita graça mas to postando pois alguém pode gostar e como o boteco tá meio parado mesmo, aqui vai o texto:
              </div>
               <hr>
               <div style="margin-bottom:5px; padding: 15px; border: 1px solid #DEDEDE; text-align: justify">
                   Ae pessoal, recebi isso aqui por e-mail a um tempo atrás, então já vou adiantando que é coisa velha e o texto é gigante, se não quiser não leia e espere um resumo ou comentários do pessoal. Não tem muita graça mas to postando pois alguém pode gostar e como o boteco tá meio parado mesmo, aqui vai o texto:


              </div>
               <hr>
               <div style="margin-bottom:5px; padding: 15px; border: 1px solid #DEDEDE; text-align: justify">
                   Ae pessoal, recebi isso aqui por e-mail a um tempo atrás, então já vou adiantando que é coisa velha e o texto é gigante, se não quiser não leia e espere um resumo ou comentários do pessoal. Não tem muita graça mas to postando pois alguém pode gostar e como o boteco tá meio parado mesmo, aqui vai o texto:


              </div>
               <hr>
               <div style="margin-bottom:5px; padding: 15px; border: 1px solid #DEDEDE; text-align: justify">
                   Ae pessoal, recebi isso aqui por e-mail a um tempo atrás, então já vou adiantando que é coisa velha e o texto é gigante, se não quiser não leia e espere um resumo ou comentários do pessoal. Não tem muita graça mas to postando pois alguém pode gostar e como o boteco tá meio parado mesmo, aqui vai o texto:


              </div>
               <hr>
               <div style="margin-bottom:5px; padding: 15px; border: 1px solid #DEDEDE; text-align: justify">
                   Ae pessoal, recebi isso aqui por e-mail a um tempo atrás, então já vou adiantando que é coisa velha e o texto é gigante, se não quiser não leia e espere um resumo ou comentários do pessoal. Não tem muita graça mas to postando pois alguém pode gostar e como o boteco tá meio parado mesmo, aqui vai o texto:


              </div>
                   </div>
             </div>
   
        </div>
        
         <div class="span1 pull-right" style="background: #f5f5f5; border: 1px solid #DEDEDE; text-align: center; width: 10%; margin-right: 10px; padding-right:0px; float: right; min-height: 768px; ">
         <div style="padding: 10px;">
             <ul class="thumbnails">
            <li class="" >
            <br>    
            <img src="imagens/t2s.png" width="115" height="115" alt="" align="center">
            </li>
            </ul>
            <br>
            <ul class="thumbnails">
            <li class="">
            <br>    
            <img src="imagens/fatecpg.png" width="115" height="115" alt="" align="center">
            </li>
            </ul>
            <br>
            <ul class="thumbnails">
            <li class="">
            <br>    
            <img src="imagens/bing.png" width="115" height="115" alt="" align="center">
            </li>
            </ul>
            <br>
            <ul class="thumbnails">
            <li class="">
            <br>    
            <img src="imagens/banda.jpg" width="115" height="115" alt="" align="center">
            </li>
            </ul>
            </div>
        </div>
    
    </div>


    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
     <script src="./resources/jquery.js"></script>
        <script src="./resources/bootstrap-transition.js"></script>
        <script src="./resources/bootstrap-alert.js"></script>
        <script src="./resources/bootstrap-modal.js"></script>
        <script src="./resources/bootstrap-dropdown.js"></script>
        <script src="./resources/bootstrap-scrollspy.js"></script>
        <script src="./resources/bootstrap-tab.js"></script>
        <script src="./resources/bootstrap-tooltip.js"></script>
        <script src="./resources/bootstrap-popover.js"></script>
        <script src="./resources/bootstrap-button.js"></script>
        <script src="./resources/bootstrap-collapse.js"></script>
        <script src="./resources/bootstrap-carousel.js"></script>
        <script src="./resources/bootstrap-typeahead.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                function closeDialog () {
                    $('#windowLoginDialog').modal('hide');
                };
                function okClicked () {
                    alert("Em Construção");
                    $('#windowLoginDialog').modal('hide');
                };
        </script>
        <!-- Instancia as Tooltips -->
        <script type="text/javascript">
                    !function($){
                    $(function (){
                        $('a[rel=tooltip]').tooltip();
                    });
                }( window.jQuery )
        </script>
        <!--        fim                -->
        <script type="text/javascript">
                document.title = "(3) "+document.title;
        </script>
        <div id="windowLoginDialog" class="modal hide fade" style="display: none; ">
            <div class="modal-header">
                <a href="http://bootstrapmodaldemo.scripting.com/#" class="close">×</a>
                <h3><fmt:message key="index.login"/></h3>
                <h4>Digite seu e-mail e sua senha para efetuar seu Login.</h4>
            </div>
            <div class="modal-body">
                <ul>
                    <li>
                        <div class="divDialogElements">
                            <input class="xlarge" id="user_email" name="user_email" type="Email" placeholder="Email">
                        </div>
                    </li>
                    <li>
                        <div class="divDialogElements">
                            <input id="user_password" name="user_password" type="password" placeholder="Password">
                        </div>
                    </li>
                </ul>
            </div>

            <div class="modal-footer">
                <a href="#" class="btn primary" onclick="okClicked ();"><fmt:message key="btn.ok"/></a>
                <a href="#" class="btn secondary" onclick="closeDialog ();"><fmt:message key="btn.cancel"/></a>
            </div>
        </div>

    <!-- Analytics
    ================================================== -->
    <script>
      var _gauges = _gauges || [];
      (function() {
        var t   = document.createElement('script');
        t.type  = 'text/javascript';
        t.async = true;
        t.id    = 'gauges-tracker';
        t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
        t.src = '//secure.gaug.es/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(t, s);
      })();
    </script>
  </body>
</html>
